<script>
export default {
    name: "PronExercise"
    data() {
        return {
            list: [{
                ch: ['ai', 'ei'],
                pron: 'wav/pron/ai.wav'
            }, {
                ch: ['au', 'eau'],
                pron: 'wav/pron/eau.wav'
            }, {
                ch: ['aur'],
                pron: 'wav/pron/aur.wav'
            }, {
                ch: ['eu在词末开音节，/z/，/t/，/d/，/ʒ/前，如jeu'],
                pron: 'wav/pron/jeu.wav'
            }, {
                ch: ['eu其他情况，如jeune'],
                pron: 'wav/pron/jeune.wav'
            }, {
                ch: ['œu同eu'],
                pron: 'wav/pron/jeu.wav'
            }, {
                ch: ['œ'],
                pron: 'wav/pron/œ.wav'
            }, {
                ch: ['oi'],
                pron: 'wav/pron/toit.wav'
            }, {
                ch: ['ou'],
                pron: 'wav/pron/ou.wav'
            }, {
                ch: ['ou元音前读/w/，如joue'],
                pron: 'wav/pron/joue.wav'
            }, {
                ch: ['an', 'am', 'en', 'em'],
                pron: 'wav/pron/am.wav'
            }, {
                ch: ['in', 'im', 'ain', 'aim', 'ein'],
                pron: 'wav/pron/um.wav'
            }, {
                ch: ['on', 'om'],
                pron: 'wav/pron/on.wav'
            }, {
                ch: ['un', 'um'],
                pron: 'wav/pron/un.wav'
            }, {
                ch: ['um在词尾时，如album'],
                pron: 'wav/pron/album.wav'
            }, {
                ch: ['ien'],
                pron: 'wav/pron/ien.wav'
            }, {
                ch: ['oin'],
                pron: 'wav/pron/oin.wav'
            }, {
                ch: ['gn，如vigne'],
                pron: 'wav/pron/vigne.wav'
            }, ],
            chars: [],
            alphabet: '',
            pron: '',
            answer: '',
            auto_play: false
        };
    },
    mounted() {
        this.new_one();
    },
    watch: {
        answer() {
            if (this.$data.answer === this.alphabet) {
                this.new_one();
                this.auto_play = true;
            }
        }
    },
    methods: {
        new_one() {
            var r = Math.round(Math.random() * 26);
            this.alphabet = this.chars[r];
            this.pron = 'wav/' + this.alphabet + '.wav';
            this.answer = '';
        }
    }
}
</script>

<template>
    <h1 class="text-center">发音练习</h1>
    <div class="card">
        <div class="card-header">
            <audio v-bind:src="pron" v-bind:autoplay="auto_play" controls></audio>
        </div>
        <div class="card-body">
            <input type="text" class="form-control" v-model="answer">
        </div>
    </div>
</template>
